<template>
  <div class="person">
    <img :src="avatar" alt="" />
    <div>{{name}}</div>
    <i @click="clickx" class="el-icon-circle-close"></i>
  </div>
</template>

<script>
export default {
    // 如下声明的两个属性:       avatar:头像路径    name:名称
    // 默认undefined，可以接收任意类型的数据
    props:['avatar', 'name'],
    methods: {
      clickx() {  // 点击叉子后执行
        // 将该点击事件作为当前组件的自定义事件抛出给父组件
        // 父组件捕获后，可以进行后续业务处理
        this.$emit('delete')
        this.$emit('myevent', {a:1, b:2})
      }
    },
};
</script>

<style lang="scss" scoped>
.person {
  margin:0px 10px 10px 0px;
  display: inline-block;
  border: 1px solid #ddd;
  width: 90px;
  padding: 5px;
  position: relative;
  img {
    width: 90px;
  }
  div {
    font-size: 0.8em;
    width:90px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
  i {
    position: absolute;
    top: -8px; right:-11px;
    background-color: #fff;
    display: none;
  }
}
.person:hover i {
  display: block;
}

</style>
